<!-- 新增/编辑加减分指标 -->
<template>
  <a-drawer
    width="40%"
    :visible="props.visible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    unmountOnClose
  >
    <template #title>
      {{ props.data?.id ? '编辑加减分指标' : '新增加减分指标' }}
    </template>
    <div>
      <a-form
        :model="formData.data"
        ref="refForm"
        :rules="rules"
        auto-label-width
      >
        <a-form-item label="指标名称" field="name" show-colon>
          <a-input v-model="formData.data.name"></a-input>
        </a-form-item>
        <a-form-item label="指标定义" field="definition" show-colon>
          <a-textarea
            v-model="formData.data.definition"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="项目界定" field="define" show-colon>
          <a-textarea
            v-model="formData.data.define"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="评价标准/规则" field="rule" show-colon>
          <a-textarea
            v-model="formData.data.rule"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="考核目标值" field="goal" show-colon>
          <a-input v-model="formData.data.goal" />
        </a-form-item>
        <a-form-item label="评分方式" field="mark" show-colon>
          <a-radio-group v-model="formData.data.mark">
            <a-radio :value="1">直接输入</a-radio>
            <a-radio :value="2">公式计算</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="评分人" field="" show-colon>
          系统自动评分
          <!-- <a-tooltip
            content="注：评分人在平常的情况下，都是默认关闭，只有特殊指定的模板，才
开启，并且一直会指定某个指定的人员进行评分。
平常关闭状态下是以每个单独评价中”的设置定的评分人为准"
          >
            <icon-info-circle-fill style="color: #165dff; font-size: 16px" />
          </a-tooltip>
          <a-switch :checked-value="1" :unchecked-value="2" disabled></a-switch> -->
        </a-form-item>
        <a-form-item label="备注" field="remark" show-colon>
          <a-textarea
            v-model="formData.data.remark"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="新增到指标库" field="" show-colon>
          <a-radio-group v-model="formData.isAddStore">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <!-- <CountSetting v-model:visible="countSettingVisiable"></CountSetting> -->
    </div>
    <template #footer>
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确认</a-button>
        <a-button type="primary" @click="continueAdd">确认并继续新增</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import CountSetting from '../CountSetting/index.vue';

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    data?: any; // 传进来的数据,
  }>(),
  {}
);

const emits = defineEmits(['update:visible', 'kpiExtraIndexEmit']);
let refForm = ref();
let countSettingVisiable = ref(false); // 是否设置计算公式弹出框

const formData = reactive<any>({
  data: {
    name: '', // 指标名称
    definition: '', // 指标定义
    define: '', // 项目界定
    rule: '', // 评分标准/规则
    dataSource: undefined, // 数据来源，评分人
    dimensionaId: undefined, // 纬度id
    goal: undefined, // 考核目标值
    remark: '', // 备注
    isAddStore: false // 是否新增到指标库
  }
});

const rules = {
  name: [
    {
      required: true,
      message: '请输入'
    }
  ],
  rule: [
    {
      required: true,
      message: '请输入'
    }
  ],
  goal: [
    {
      required: true,
      message: '请输入'
    }
  ]
};

watch(
  () => props.visible,
  (newVal: boolean) => {
    // 如果是编辑，则赋值给formData
    // if (newVal && props.data?.id) {
    //   formData.value = cloneDeep(props.data);
    // } else {
    //   // 每次新增都初始化
    //   for (let i in formData.value) {
    //     // 如果是评分人则默认赋值为2，其他为undefined
    //     if (i === 'scorePeople') formData.value[i] = 2;
    //     else if (i === 'isAddStore') formData.value[i] = false;
    //     else formData.value[i] = undefined;
    //   }
    // }
    if (newVal) {
      // for (let i in formData.value) {
      //   // 如果是评分人则默认赋值为2，其他为undefined
      //   if (i === 'scorePeople') formData.value[i] = 2;
      //   else if (i === 'isAddStore') formData.value[i] = false;
      //   else formData.value[i] = undefined;
      // }
    }
  }
);

// 加和计算tips表格数据
const sumData = [
  {
    name: '指标1',
    score: '评分1'
  },
  {
    name: '指标2',
    score: '评分2'
  },
  {
    name: '指标3',
    score: '评分3'
  }
];

// 加权计算tips表格数据
const weightData = [
  {
    name: '指标1',
    weight: '50%',
    score: '评分1'
  },
  {
    name: '指标2',
    weight: '30%',
    score: '评分2'
  },
  {
    name: '指标3',
    weight: '20%',
    score: '评分3'
  }
];

const handleOk = async () => {
  if (await refForm.value.validate()) {
    return;
  }
  emits('kpiExtraIndexEmit', formData.data);
  emits('update:visible', false);
};

const continueAdd = () => {
  //
};

const handleCancel = () => {
  emits('update:visible', false);
};
</script>

<style scoped lang="less">
.icon {
  cursor: pointer;
  font-size: 20px;
}
</style>
